<template>
     <collapse-transition>
        <ul :class="classes">
            <li>
                <div class="tree-item" :class="{'tree-item-selected':data.selected}" @click="handleSelect">
                <span :class="arrowClasses" @click="handleExpand">
                    <Icon v-if="showArrow" type="arrow-right-b"></Icon>
                    <Icon v-if="showLoading" type="load-c" class="ivu-load-loop"></Icon>
                </span>
                <Checkbox
                        v-if="showCheckbox"
                        :value="data.checked"
                        :indeterminate="data.indeterminate"
                        :disabled="data.disabled || data.disableCheckbox"
                        @click.native.prevent="handleCheck"></Checkbox>
                <Render v-if="data.render" :render="data.render" :data="data" :node="node"></Render>
                <Render v-else-if="isParentRender" :render="parentRender" :data="data" :node="node"></Render>
                <span v-else :class="titleClasses">
                  <slot name="node" :data="data">
                      <span v-html="data[showKey]"></span>
                  </slot>
                </span>
                </div>
                <Tree-node
                        v-if="data.expand"
                        v-for="(item, i) in data.children"
                        :show-key="showKey" 
                        :check-key="checkKey" 
                        :visbile-key="visbileKey" 
                        :visbile-reverse="visbileReverse" 
                        v-show="nodeVisable(item)"
                        :key="i"
                        :data="item"
                        :multiple="multiple"
                        :show-checkbox="showCheckbox">
                        <template slot="node" slot-scope="node">
                          <slot name="node" :data="node.data"></slot>
                        </template>
                </Tree-node>
                <div class="tree-line"></div>
            </li>
        </ul>
    </collapse-transition>
</template>
<script>
import { Tree } from "iview";
const prefixCls = "ivu-tree";

export default {
  name: "TreeNode",
  extends: Tree.components.TreeNode,
  props: {
    visbileReverse: {
      default: false
    },
    visbileKey: {
      default: null
    },
    checkKey: {
      default: "checked"
    },
    showKey: {
      default: "title"
    }
  },
  computed: {
    visible() {
      return true;
    },
    classes() {
      var classes = [`${prefixCls}-children`];
      if (this.data.classes && this.data.classes.forEach) {
        classes = [...this.data.classes];
      }
      return classes;
    }
  },
  methods: {
    nodeVisable(item) {
      return this.visbileKey
        ? item.show !== this.visbileReverse && item[this.visbileKey] !== false
        : item.show !== this.visbileReverse;
    }
  }
};
</script>
<style lang="less">
.ivu-tree {
  .tree-item {
    width: 100%;
    padding: 4px 8px;
    display: inline-block;
    &:hover {
      background: #eaf4fe;
    }
    &.tree-item-selected {
      background: #d5e8fc;
    }
    .ivu-checkbox-wrapper {
      margin-right: 0;
    }
    .ivu-tree-arrow {
      margin-right: 4px;
    }
  }
  ul > li {
    margin: 3px 0;
  }
}
</style>
